<template>
	<div class="wrap" v-loading="loading" element-loading-text="等下,我正在请求" element-loading-spinner="el-icon-loading">
		<basic-opt :has_left="false">
			<template #add>
				<div class="opt-item">
					<el-button @click="addForm" icon="el-icon-circle-plus-outline" type="primary" size="medium">添加项目</el-button>
				</div>
			</template>
		</basic-opt>

		<div class="table-box">
			<el-table :data="data" stripe :header-cell-style="header_cell_style" :max-height="table_max_height">
				<el-table-column prop="id" label="ID"></el-table-column>
				<el-table-column prop="name" label="项目名称"></el-table-column>
				<el-table-column prop="app_id" label="app_id" width="300px"></el-table-column>
				<el-table-column prop="aip_id" label="aip_id"></el-table-column>
				<el-table-column prop="secret" label="Sectet" width="300px"></el-table-column>
				<el-table-column prop="state" label="状态">
					<template #default="scope">
						<span :class="scope.row.state == '1' ? 'green' : 'red' ">{{scope.row.state == "1" ? "启用" : "停用" }}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="200">
					<template #default="scope">
						<div class="showOperation">
							<el-button @click="onEditData(scope.row)" type="success" plain size="mini">编辑</el-button>
							<el-button @click="onDelData(scope.row)" type="danger" plain size="mini">删除</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<page-component @pageChanged="onPageChanged"></page-component>

		<!-- 添加项目接口 -->
		<compoment-drawer :drawer_name="drawer_name" :drawer_form="drawer_form" @getDrawerForm="getDrawerForm">
			<el-form ref="form" :model="form" label-width="120px">
				<el-scrollbar height="80vh" v-loading="form_loading" element-loading-text="正在进行请求,请稍后"
					element-loading-spinner="el-icon-loading">
					<div class="form-flex">
						<el-form-item label="百度接口" prop="app_id">
							<baidu-interface :aip_id="form.aip_id" @getBaiduAipId="getBaiduAipId"></baidu-interface>
						</el-form-item>
						<el-form-item label="项目名称" prop="name">
							<el-input class="w-ipt" v-model="form.name" placeholder="请输入项目名称"></el-input>
						</el-form-item>
						<el-form-item label="是否启用" prop="state">
							<el-radio-group v-model="form.state">
								<el-radio-button label="1">启用</el-radio-button>
								<el-radio-button label="2">停用</el-radio-button>
							</el-radio-group>
						</el-form-item>
					</div>
				</el-scrollbar>
				<submit-reset @getChildNewForm="getNewForm" @getChildResetForm="resetForm('form')">
				</submit-reset>
			</el-form>
		</compoment-drawer>

		<!-- 删除数据确认 -->
		<delete-data :del_data_dialog="del_data_dialog" @getDelData="getDelData" @getCancelDelData="getCancelDelData">
			<el-descriptions class="margin-top" :column="1" size="medium" border>
				<el-descriptions-item>
					<template #label>
						id
					</template>
					{{delData.id}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						项目名称
					</template>
					{{delData.name}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						AppId
					</template>
					{{delData.app_id}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						AipId
					</template>
					{{delData.aip_id}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						Sectet
					</template>
					{{delData.secret}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						启用状态
					</template>
					{{delData.state == "1" ? "启用" : "停用"}}
				</el-descriptions-item>
			</el-descriptions>
		</delete-data>
	</div>
  <!--  mobile  -->
  <div class="mobile-wrap" v-loading="loading" element-loading-text="等下,我正在请求" element-loading-spinner="el-icon-loading">
    <div class="moblie-table-box">
      <el-table :data="data" stripe :header-cell-style="header_cell_style" :max-height="mobile_table_max_height">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="name" label="项目名称"></el-table-column>
        <el-table-column prop="app_id" label="app_id" width="300px"></el-table-column>
        <el-table-column prop="aip_id" label="aip_id"></el-table-column>
        <el-table-column prop="secret" label="Sectet" width="300px"></el-table-column>
        <el-table-column prop="state" label="状态">
          <template #default="scope">
            <span :class="scope.row.state == '1' ? 'green' : 'red' ">{{scope.row.state == "1" ? "启用" : "停用" }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <page-component @pageChanged="onPageChanged"></page-component>
  </div>
</template>

<script>
	import API from '@/api/index.js'
	import mixin from '@/mixin.js'
	import BaiduInterface from '@/components/form/baidu-interface.vue'

	export default {
		name: 'Project',
		mixins: [mixin],
		components: {
			BaiduInterface
		},
		data() {
			return {
				// 表单
				drawer_name: '添加项目',
				form_loading: false, // 表单填写时加载
				form: {
					aip_id: '',
					name: '',
					state: 1
				},
			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			async getData() {
				let self = this;
				self.loading = true;
				try {
					let params = {}
					self.addPageInfo(params)
					let res = await API.projects(params.pageNumber, params.pageSize)
					self.loading = false;
					self.onGotPageData(res)
				} catch (err) {
					self.loading = false;
				}
			},
			// 编辑数据
			onEditData(row) {
				let self = this;
				self.drawer_form = true;
				self.form = {
					id: row.id,
					name: row.name,
					aip_id: row.aip_id,
					state: row.state
				}
			},
			// 确定删除数据
			submitDeleteData(val) {
				let self = this;
				API.delProject(val).then(res => {
					console.log(res)
					self.getData();
					self.delSuccess();
				}).catch(err => {
					self.$message.error(err.response.data.message)
				});
			},
			// 赋值AIPID
			getBaiduAipId(data) {
				let self = this;
				self.form.aip_id = data.child_aip_id;
			},
			// 提交表单
			getNewForm() {
				let self = this;
				self.form_loading = true;
				API.project(self.form).then(res => {
					console.log(res)
					self.submitSuccess();
					self.drawer_form = false;
					self.form_loading = false;
					self.initForm();
					self.getData();
				}).catch(err => {
					self.form_loading = false;
					self.$message.error(err.response.data.message);
				});
			},
			// 清空表单
			initForm() {
				let self = this;
				self.form = {
					aip_id: '',
					name: '',
					state: 1
				};
			},

		}
	}
</script>

<style scoped lang="scss">
	.green {
		color: green;
	}
	.red {
		color: red;
	}
</style>
